<template>
  <div class="login-wrap">
    <el-form
      label-position="left"
      :model="nameValidateForm"
      :rules="rules"
      ref="nameValidateForm"
      label-width="0px"
      class="demo-nameValidateForm login-container"
    >
      <h3 class="title">用户注册</h3>
      <!-- 用户名 -->
      <el-form-item label="" prop="name" :rules="[{ required: true, message: '用户名不能为空' }]">
        <el-input placeholder="请输入用户名" type="text" v-model="nameValidateForm.name" autocomplete="off"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="" prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
        <el-input placeholder="请输入密码" v-model="nameValidateForm.password" show-password></el-input>
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="" prop="lastpassword" :rules="[{ required: true, message: '确认密码不能为空' }]">
        <el-input placeholder="请再次输入密码" v-model="nameValidateForm.lastpassword" show-password></el-input>
      </el-form-item>

      <el-form-item style="float: right">
        <el-button color="#626AEF" type="success" @click="submitForm('nameValidateForm')" >注册</el-button>
        <el-button color="#B1B5F7" type="primary" @click="makeweb('nameValidateForm')" >返回登录</el-button>
                <el-button color="#EFF0FD" type="warning" @click="resetForm('nameValidateForm')" >重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: 'Register',
  data() {
    return {
      nameValidateForm: {
        code: '',
        name: '',
        password: '',
        lastpassword: '',
      },
    }
  },
  methods: {
    register_account(formName) {
      this.$axios
        .get('/register', {
          params: {
            username: this.nameValidateForm.name,
            userpassword: this.nameValidateForm.password,
          },
        })
        .then(function (res) {
          console.log(res)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    submitForm(formName) {
      this.$refs.nameValidateForm.validate(valid => {
        if (valid) {
          if (this.nameValidateForm.password === this.nameValidateForm.lastpassword) {
            this.register_account()
            this.$axios.get('/registersuccess').then(res => {
              this.nameValidateForm.code = res['data']['code']
              if (this.nameValidateForm.code === '10') {
                ElMessage({
                  message: '您已注册成功！',
                  type: 'success',
                })
                // console.log(this.nameValidateForm.name);
              } else {
                alert('注册失败，请检查！')
                return false
              }
            })
          } else {
            alert('密码不一致！')
            return false
          }
        } else {
          alert('未填写完整！')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs.nameValidateForm.resetFields()
    },
    makeweb() {
      this.$router.push({ path: '/login', name: 'Login' })
    },
  },
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-color: #090E1C;
  
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
 border-radius: 10px;
  margin: 0px auto;
  width: 400px;
  padding: 50px 50px 50px 50px;
  background: #eee;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-size: 36px;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
